<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>骨医快线</title>
    <link href="../../../css/mui.plus.css" rel="stylesheet"/>
    <style type="text/css">
    	.no-padding {
    		padding: 0;
    	}
    	.btn-area {
    		padding: 80px 30px  50px;
    	}
    	.btn-area>button {
    		padding: 10px 0;
    	}
    	#show {
    		color: #30b497;
    	}
    	.mui-icon>img {
    		width: 20px;
    		border-radius: 50px; 
    	}
    </style>
</head>
<body>
	<header class="mui-bar mui-bar-nav oe-pri-bar">
	    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	    <h1 class="mui-title">兑换积分</h1>
	</header>
	
	<div class="mui-content">
		<form class="mui-input-group">
		    <div class="mui-input-row">
		        <label>我的积分</label>
		        <input id="max" type="text" class="mui-input-clear" placeholder="0" disabled data-max="0">
		    </div>
		    <div class="mui-input-row">
		        <label>兑换积分</label>
		        <input id="input" type="text" class="mui-input-clear" placeholder="请输入" value="0" maxlength="10">
		    </div>
		    <div class="mui-input-row">
		        <label>兑换金额</label>
		        <div id="show" type="text" placeholder="" value="￥0" style="line-height: 40px;">￥0</div>
		    </div>
		</form>
		
		<div class="oe-divide-block"></div>
		
		<ul class="mui-table-view">
	        <li class="mui-table-view-cell">
                <p>提现账户</p>
	        </li>
	        <li class="mui-table-view-cell no-padding">
                <div class="mui-input-row mui-radio ">
                    <label>
                    	<span class="mui-icon mui-pull-left" style="margin-right: 5px;">
							<img src="../../../images/paymode/ALIPAY.png"/>
						</span>
                    	支付宝
                    </label>
                    <input name="withdrawals_mode" type="radio" checked value="ALIPAY">
                </div>
	        </li>
	        <li class="mui-table-view-cell no-padding">
                <div class="mui-input-row mui-radio ">
                    <label>
	                	<span class="mui-icon mui-pull-left" style="margin-right: 5px;">
							<img src="../../../images/paymode/bank.png"/>
						</span>
                    	银行卡
                    </label>
                    <input name="withdrawals_mode" type="radio" value="BANKCARD">
                </div>
	        </li>
	    </ul>
	    
	    <div class="btn-area">
	    	<button id="btn-next" type="button" class="mui-btn mui-btn-primary mui-btn-block">下一步</button>
	    </div>
		
	</div>
	
    <script src="../../../js/mui.min.js"></script>
    <script src="../../../js/app.js"></script>
    <script>
    	;(function($, a){
    		var wv,
    			maxEle = document.getElementById("max"),
    			inputEle = document.getElementById("input");
    			showEle = document.getElementById("show");
    			
    		$.plusReady(function(){
    			wv = plus.webview.currentWebview();
    			inputEle.value = maxEle.placeholder = maxEle.dataset.max = wv.integral;
    			showEle.innerHTML = '￥' + inputEle.value;
    		});
    			
    		$('.mui-content').on('input', '#input', function(){
    			showEle.innerHTML = '￥' + inputEle.value;
    		});
    		
    		$('.mui-content').on('change', '#input', function(){
    			if(parseInt(inputEle.value) > parseInt(maxEle.dataset.max)){
    				inputEle.value = '';
    				showEle.innerHTML = '￥0';
    				return $.toast('输入积分超出范围');
    			}
    		});
    		
    		$('.mui-content').on('tap', '#btn-next', function(){
				var payMode = getRadioValueByName('withdrawals_mode'),
					amount = inputEle.value;
				if(parseInt(inputEle.value) > parseInt(maxEle.dataset.max) || parseInt(inputEle.value) < 0)return $.toast('请输入合理的金额');
				if(amount && payMode === 'ALIPAY'){
					$.openWindow({
						url: 'alipay.html',
						waiting: {
							autoShow: false
						},
						extras: {
							payMode: payMode,
							amount: amount
						}
					});
				}else{
					$.openWindow({
						url: 'bankcard.html',
						waiting: {
							autoShow: false
						},
						extras: {
							payMode: payMode,
							amount: amount
						}
					});
				}
    		});
    		
    		function getRadioValueByName(name){
			  var temp = document.getElementsByName(name);
			  
			  for(var i=0;i<temp.length;i++){
			     if(temp[i].checked)return temp[i].value;
			  }
			}
    		
    	}(mui, app));
    </script>
</body>
</html>